<template>
	<view class="container">

		<!-- 基本信息填写区 -->
		<view class="basic-info">
			<view class="basic-info-header">
				<view class="avatar basic-info-header-left">
					<image v-if="formData.gender=='0'" src="/static/girl.jpeg" mode="aspectFit"></image>
					<image v-else src="/static/boy.jpeg" mode="aspectFit"></image>
				</view>
				<view class="basic-info-header-right">
					<view class="input-item">
						<text><text style="color: red;">*</text>姓 氏</text>
						<input type="text" placeholder="填写姓氏" v-model="formData.surname" />
					</view>
					<view class="input-item">
						<text><text style="color: red;">*</text>名 字</text>
						<input type="text" placeholder="填写名字" v-model="formData.memberName" />
					</view>
					<view class="input-item">
						<text><text style="color: red;">*</text>性 别</text>
						<picker @change="bindGenderChange" :value="formData.gender" :range="genderArray">
							<view class="uni-input">{{ genderArray[formData.gender] }}</view>
						</picker>
					</view>
				</view>
			</view>
			<view class="input-item">
				<text>排 行</text>
				<picker @change="bindRankingChange" :value="rankingIndex" :range="rankingArray">
					<view class="uni-input">{{ rankingArray[rankingIndex] }}</view>
				</picker>
			</view>
			<view class="input-item">
				<text>生 日</text>
				<picker mode="date" @change="bindDateChange">
					<view class="uni-input">{{ formData.birthdate || '选择出生日期' }}</view>
				</picker>
			</view>
			<view class="input-item">
				<text>出生地</text>
				<input type="text" placeholder="选择出生地" v-model="formData.birthplace" />
			</view>
			<view class="input-item">
				<text>字 辈</text>
				<input type="text" placeholder="填写字辈" v-model="formData.generation" />
			</view>
			<view class="input-item">
				<text>别名/小名</text>
				<input type="text" placeholder="填写别名或小名" v-model="formData.nickname" />
			</view>
			<view class="input-item">
				<text>成员状态</text>
				<picker @change="bindStatusChange" :value="formData.memberStatus" :range="statusArray">
					<view class="uni-input">{{ formData.memberStatus }}</view>
				</picker>
			</view>
			<view class="input-item">
				<text>备 注</text>
				<input type="text" placeholder="成员备注(如婶婶,大伯)" v-model="formData.notes" />
			</view>
			<view class="input-item">
				<text>是否健在</text>
				<switch :checked="formData.isAlive==1" @change="bindIsAliveChange"></switch>
			</view>
			<view class="input-item">
				<text>关联此人</text>
				<switch :checked="formData.isRelated==1" @change="bindRelatedChange"></switch>
			</view>
		</view>

		<!-- 介绍信息填写区 -->
		<view class="introduction">
			<text>介 绍(最多300字)</text>
			<textarea placeholder="填写介绍信息,生平事迹,荣誉奖项等" maxlength="300" v-model="formData.introduction"></textarea>
		</view>

		<!-- 补充信息填写区 -->
		<view class="additional-info">
			<text>补充信息:</text>
			<view class="input-item">
				<text>民 族</text>
				<input type="text" placeholder="填写所属民族" v-model="formData.ethnicity" />
			</view>
			<view class="input-item">
				<text>血 型</text>
				
				<picker @change="bindBloodChange" :value="formData.bloodType" :range="bloodArray">
					<view class="uni-input">{{ formData.bloodType }}</view>
				</picker>
			</view>
			<view class="input-item">
				<text>现居地</text>
				<input type="text" placeholder="填写现居地" v-model="formData.currentAddress" />
			</view>
			<view class="input-item">
				<text>学 校</text>
				<input type="text" placeholder="填写学校信息" v-model="formData.school" />
			</view>
			<view class="input-item">
				<text>学 历</text>
				<picker @change="bindEducationChange" :value="formData.education" :range="educationArray">
					<view class="uni-input">{{ formData.education }}</view>
				</picker>
			</view>
			<view class="input-item">
				<text>单 位</text>
				<input type="text" placeholder="填写所属单位" v-model="formData.workPlace" />
			</view>
			<view class="input-item">
				<text>职 位</text>
				<input type="text" placeholder="填写职位信息" v-model="formData.position" />
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="button-container">
			<button class="save-btn" @click="saveMember">保 存</button>
		</view>
	</view>
</template>


<script>
	import {
		getGenealogyMember,
		addGenealogyMember,
		editGenealogyMember
	} from "@/api/record/genealogyMember.js";
	export default {
		data() {
			return {
				formData: {
					surname: '',
					name: '',
					gender: 1,
					ranking: '',
					birthdate: '',
					birthplace: '',
					generation: '',
					nickname: '',
					status: '',
					notes: '',
					isAlive: 1,
					related: 0,
					introduction: '',
					ethnicity: '',
					bloodType: '',
					currentAddress: '',
					school: '',
					education: '',
					unit: '',
					position: '',
					genealogyId: '',
				},
				genderArray: ['女','男','未知'],
				bloodArray: ['A', 'B', 'AB', 'O'],
				genderIndex: 2,
				rankingArray: ['长子', '次子', '三子', '...'], // 可以根据实际需求填充
				rankingIndex: 3,
				statusArray: ['外嫁', '外迁', '嫁入', '招婿', '过继', '收养'], // 可以根据实际需求填充
				educationArray: ['小学', '初中', '高中', '本科', '硕士', '博士'], // 可以根据实际需求填充
				educationIndex: 0,
				isAdd:false,
			};
		},
		onLoad(event) {
			console.log(event)
			if(event.type){
				this.formData.genealogyId = event.genealogyId;
				this.formData.genealogyId = event.genealogyId;
				if(event.type == 'addSon'){
					this.formData.parentId = event.parentId;
					this.formData.gender = 1;
					this.formData.relation = '儿子';
				} else if(event.type == 'addDaughter'){
					this.formData.parentId = event.parentId;
					this.formData.gender = 0;
					this.formData.relation = '女儿';
				} else if(event.type == 'addSpouse'){
					this.formData.spouseId = event.memberId;
					this.formData.gender = event.gender == '1'? '0':'1';
					this.formData.relation = event.gender == '1'? '妻子':'丈夫';
				} else if(event.type == 'addBrother'){
					this.formData.parentId = event.parentId;
					this.formData.gender = 1;
					this.formData.relation = '儿子';
				} else if(event.type = 'addRoot'){
					this.formData.relation = '始祖';
				}
				this.isAdd = true;
			} else {
				this.isAdd = false;
				getGenealogyMember(event.memberId).then(resp => {
					this.formData = resp.data;
					console.log(resp)
				})
			}
			
		},
		methods: {
			bindGenderChange(e) {
				this.genderIndex = e.target.value;
				this.formData.gender = this.genderArray[this.genderIndex];
			},
			bindBloodChange(e) { ;
				this.formData.bloodType = this.bloodArray[e.target.value];
			},
			bindRankingChange(e) {
				this.rankingIndex = e.target.value;
				this.formData.ranking = this.rankingArray[this.rankingIndex];
			},
			bindDateChange(e) {
				this.formData.birthdate = e.target.value;
			},
			bindStatusChange(e) {
				this.formData.memberStatus = this.statusArray[e.target.value];
				console.log(e)
			},
			bindIsAliveChange(e) {
				this.formData.isAlive = e.detail.value ? 1 : 0;
				console.log(e)
			},
			bindRelatedChange(e) {
				this.formData.isRelated = e.detail.value ? 1 : 0;
				console.log(e)
			},
			bindEducationChange(e) {
				this.educationIndex = e.target.value;
				this.formData.education = this.educationArray[this.educationIndex];
			},
			saveMember() {
				// 保存成员信息的逻辑
				console.log('保存成员信息:', this.formData);
				// 这里可以添加实际的保存逻辑，例如调用接口提交数据
				if(this.isAdd){
					addGenealogyMember(this.formData).then(resp => {
						console.log(resp)
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
					
						uni.navigateBack({
							delta: 1
						});
					})
				} else {
					editGenealogyMember(this.formData).then(resp => {
						console.log(resp)
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});
					
						uni.navigateBack({
							delta: 1
						});
					})
				}
				
			}
		}
	};
</script>


<style>
	.container {
		padding: 20px;
	}

	.basic-info,
	.introduction,
	.additional-info {
		margin-bottom: 20px;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
	}
	
	.additional-info{
		
			margin-bottom: 80px;
	}

	.basic-info-header {
		display: flex;
		flex-direction: row;
	}

	.basic-info-header-left {
		flex: 1;
	}

	.basic-info-header-right {
		flex: 2;
	}

	/* .basic-info-header-right>.input-item{
		margin: 20px 0;
	} */

	.avatar {
		width: 100px;
		height: 100px;
		margin-bottom: 10px;
	}

	.avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.input-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.input-item text {
		width: 100px;
	}

	.input-item input,
	.input-item .uni-input {
		flex: 1;
		text-align: end;
	}

	.introduction text {
		display: block;
		margin-bottom: 10px;
	}

	.introduction textarea {
		width: 100%;
		height: 100px;
		padding: 10px;
		box-sizing: border-box;
	}

	.button-container {
		width: 100%;
		position: fixed;
		text-align: center;
		bottom: 10px;
		left: 0;
		right: 0;
	}

	.save-btn {
		width: 90%;
		margin: 20px auto;
		background-color: #a0522d;
		color: white;
		border-radius: 50px;
		padding: 1px 0;
	}
</style>